<template>
  <div id="myMoney">
    <div id="leftBox">
      <div id="moneyBox">
        <span class="money">{{ money }}</span>
        <span>当前余额</span>
      </div>
      <button class="selectCake" @click="goCake">选蛋糕</button>
    </div>
    <div id="rightBox">
        <h3>余额明细</h3>
        <div>
            <span>时间</span>
            <span>明细</span>
            <span>收入/支出</span>
        </div>
        <div v-for="(item,index) in goods" :key="index" class="detail">
            <span>{{item.pay_time}}</span>
            <span>{{item.goods_name}}</span>
            <span>-{{item.goods_price * item.goods_count}}</span>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      money: "",
      goods:[]
    };
  },
  methods: {
      goCake(){
          this.$router.push("/cake")
      }
  },
  async mounted() {
      let req = await this.axios("/lqc/getAccount")
      this.money = req.data[0].account_money
      let req1 = await this.axios("/lqc/myOrder")
      req1.data.map((el)=>{
          if(el.indent_state == 1){
              this.goods.push(el)
          }
      })
  },
};
</script>
<style lang="scss" scoped>
#myMoney {
  margin: 0 100px;
  padding:200px 0;
  display: flex;
}
#moneyBox {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  border: 2px solid rgb(221, 218, 218);
  text-align: center;
  padding-top: 100px;
  box-sizing: border-box;
  span {
    display: block;
  }
  .money {
    font-size: 30px;
    margin-bottom: 10px;
  }
}
.selectCake {
  width: 140px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background-color: rgb(255, 225, 0);
  margin-left: 50px;
  margin-top: 70px;
  cursor: pointer;
}
#rightBox{
    margin-left: 200px;
    width: 50%;
    div{
        margin-top: 40px;
        display: flex;
        span{
            flex: 1;
            text-align: center;
            color: rgb(87, 87, 87);
        }
    }
}
.detail{
    border-bottom: 1px solid rgb(226, 226, 226);
    padding-bottom: 10px;
}
</style>